<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="pagename" value="index"></c:set>


<c:set var="subdirectory" scope="request" value="manage"></c:set>

<c:set var="operate2"  value="null"></c:set>

<!doctype html>
<html class="no-js fixed-layout">
<head>
	<base href="${basePath}" />
	<jsp:include page="../inc/head.jsp"  />
	<title>管理首页</title>

	<style type="text/css">
		.cardboder{
			background-color: #FAFAFA;
		}
		.box {
			margin-left:30px auto;
			margin: 30px auto;
			background-color: #fff;
		}

		.case-content {
			position: relative;
			-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
			-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
			box-shadow: 0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
			-o-box-shadow:0 1px 4px rgba(0,0,0,0.3),0 0 40px rgba(0,0,0,0.1) inset;
		}

		#scrollDiv{width:100%;height:220px;min-height:25px;line-height:25px;overflow:hidden}

	</style>
</head>
<body>
<jsp:include page="../inc/header.jsp" />

<div class="am-cf admin-main">
	<jsp:include page="../inc/sidebar.jsp">
		<jsp:param value="1" name="displayitemid" />
	</jsp:include>

	<!-- content start -->
	<div class="admin-content">
		<div class="admin-content-body">
			<div class="am-padding">
				<div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">管理首页</strong> / <small>管理首页</small></div>
			</div>

			<ul class="am-avg-sm-1 am-avg-md-2 am-margin am-padding am-text-center admin-content-list ">
<%--				<li>--%>
<%--					<a href="${basePath}/2/applyrecord"  class="am-text-success">--%>
<%--						<span class="am-icon-btn am-icon-file-text"></span>--%>
<%--						<br/>--%>
<%--						临时申请未处理与处理--%>
<%--						<br/>--%>
<%--						${count.num }/${count.total}--%>
<%--					</a>--%>
<%--				</li>--%>
				<li><a class="am-text-warning"><span class="am-icon-btn am-icon-briefcase"></span><br/>设施未绑定与设施总数<br/>${count.num1}/${count.total1}</a></li>

			</ul>

			<div class="am-g">
				<div class="am-u-sm-12">
					<table class="am-table am-table-bd am-table-striped admin-content-table">
						<thead>
						<tr>
							<th>编号</th><th>设施区域</th><th>网元名</th><th>设施名</th><th>设备类型</th><th>故障类型</th>
						</tr>
						</thead>
						<tbody>
						<c:forEach items="${listbug}" var="it" varStatus="index">
							<tr>
								<td>${index.count}</td>
								<td>${it.facArea }</td>
								<td>${it.facName }</td>
								<td>${it.facDes }</td>
								<td>${it.mouName }</td>
								<td>${it.faultName }</td>
							</tr>
						</c:forEach>

						</tbody>
					</table>
				</div>
			</div>

			<!-- 显示统计图 -->
			<!-- 第一排统计图 -->
			<div class="am-g">
				<div class="am-u-md-6">
					<div class="box case-content">
						<div id="devicetype" style="width: 100%;height: 250%"></div>
					</div>
				</div>

				<div class="am-u-md-6">
					<div class="box case-content">
						<div id="pie" style="width: 100%;height: 250%"></div>
					</div>

					<div hidden="hidden">
						<!-- 地图触发按钮 -->
						<a class="thickbox am-btn am-btn-default am-btn-xs am-text-secondary" id="mapHref" href="" ><span id="sp"></span></a>
					</div>

				</div>
			</div>

			<!--第二排统计图 -->
			<div class="am-g">
				<div class="am-u-md-6 ">
					<div class="box case-content">
						<div id="linechart1" style="width: 100%;height: 250%"></div>
					</div>
				</div>

				<div class="am-u-md-6 ">
					<div class="box case-content">
						<div id="linechart2" style="width: 100%;height: 250%"></div>
					</div>
				</div>
			</div>

			<!--第三排统计图 -->
			<div class="am-g">
				<div class="am-u-md-5 ">
					<div class="box case-content">
						<div id="piechart1" style="width: 100%;height: 250%"></div>
					</div>
				</div>

				<div class="am-u-md-7 ">
					<div class="box case-content">
						<div id="tablechart1" style="width: 100%;height: 250%">
							<h3 align="center">设备告警信息</h3>
							<div id="scrollDiv">
								<ul id="warningTextData" class="am-list am-list-static am-list-border">
								</ul>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

		<footer class="admin-content-footer">
			<hr>
		</footer>
	</div>
</div>

<a href="#" class="am-icon-btn am-icon-th-list am-show-sm-only admin-menu" data-am-offcanvas="{target: '#admin-offcanvas'}"></a>

<script type="text/javascript">
	function eledatashow(){
		var a1='日';
		var formName='电表';
		var url="${basePath}/getSumEle";
		$.ajax({
			type:'GET',
			dataType:'json',
			cache:false,
			data:'',
			url:url,
			success:function(data){
				var msg=data.data;
				var r=[];
				var count=[];
				var time=[];
				for(var c in msg){
					r.push(msg[c].sum);
					time.push(msg[c].day);
					count.push(msg[c].count);
				}
				console.log(r);
				console.log(time);
				var linechart1 = echarts.init(document.getElementById('linechart1'));
				linechart1.showLoading();
				option = {
					title: {
						left: 'center',
						text:  formName
					},
					tooltip: {
						trigger: 'axis'
					},
					yAxis: {
						type: 'value',
						name: '',   // y轴名称
						// y轴名称样式
						nameTextStyle: {
							fontWeight: 600,
							fontSize: 18
						}
					},
					xAxis: {
						type: 'category',   // 还有其他的type，可以去官网喵两眼哦
						data: time,   // x轴数据
						name: a1,   // x轴名称
						// x轴名称样式
						nameTextStyle: {
							fontWeight: 600,
							fontSize: 18
						}
					},
					series: [{
						name:'电表每日平均读数',
						type: 'line',
						data:r
					}, {
						name:'每日上报设备数',
						type: 'line',
						data:count
						}]
				};
				// 使用刚指定的配置项和数据显示图表。
				linechart1.setOption(option);
				linechart1.hideLoading();
			}
		});
	}
	 window.setTimeout(eledatashow(),500);
    function waterdatashow(){
        var a1='日';
        var formName='水表';
        var url="${basePath}getSumWater";
        $.ajax({
            type:'GET',
            dataType:'json',
            cache:false,
            data:'',
            url:url,
            success:function(data){
                var msg=data.data;
                var r=[];
                var time=[];
				var count=[];
				for(var c in msg){
					r.push(msg[c].sum);
					time.push(msg[c].day);
					count.push(msg[c].count);
				}
                console.log(r);
                console.log(time);
                var linechart2 = echarts.init(document.getElementById('linechart2'));
                linechart2.showLoading();
                option = {
                    title: {
                        left: 'center',
                        text:  formName
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    yAxis: {
                        type: 'value',
                        name: '',   // y轴名称
                        // y轴名称样式
                        nameTextStyle: {
                            fontWeight: 600,
                            fontSize: 18
                        }
                    },
                    xAxis: {
                        type: 'category',   // 还有其他的type，可以去官网喵两眼哦
                        data: time,   // x轴数据
                        name: a1,   // x轴名称
                        // x轴名称样式
                        nameTextStyle: {
                            fontWeight: 600,
                            fontSize: 18
                        }
                    },
					series: [{
						name:'水表每日平均读数',
						type: 'line',
						data:r
					}, {
						name:'每日上报设备数',
						type: 'line',
						data:count
					}]
                };
                // 使用刚指定的配置项和数据显示图表。
                linechart2.setOption(option);
                linechart2.hideLoading();
            }
        });
    }
    window.setTimeout(waterdatashow(),500);
	//echarts option
	//linechart1
	<%--function linechart1(){--%>
	<%--	$.ajax({--%>
	<%--		type:'GET',--%>
	<%--		dataType:'json',--%>
	<%--		cache:false,--%>
	<%--		data:'',--%>
	<%--		url:"${basePath}meter/preday/30",--%>
	<%--		success:function(data){--%>

	<%--			var msg=data;--%>
	<%--			// 基于准备好的dom，初始化echarts实例--%>
	<%--			var linechart1 = echarts.init(document.getElementById('linechart1'));--%>

	<%--			linechart1.showLoading();--%>

	<%--			option = {--%>

	<%--				title: {--%>
	<%--					left: 'center',--%>
	<%--					text: '电表日用电量趋势'--%>
	<%--				},--%>
	<%--				tooltip: {--%>
	<%--					trigger: 'axis'--%>
	<%--				},--%>
	<%--				xAxis: {--%>
	<%--					data: msg[0],--%>
	<%--					inverse:true--%>
	<%--				},--%>
	<%--				yAxis: {--%>
	<%--					splitLine: {show: false}--%>
	<%--				},--%>
	<%--				series: {--%>
	<%--					type: 'line',--%>
	<%--					showSymbol: true,--%>
	<%--					data: msg[1],--%>
	<%--					itemStyle : { normal: {label : {show: true}}}--%>

	<%--				}--%>
	<%--			};--%>
	<%--			// 使用刚指定的配置项和数据显示图表。--%>
	<%--			linechart1.setOption(option);--%>

	<%--			linechart1.hideLoading();--%>
	<%--		}--%>
	<%--	});--%>
	<%--}--%>
	<%--window.setTimeout(linechart1(),500);--%>

	//linechart2
	<%--function linechart2(){--%>
	<%--	$.ajax({--%>
	<%--		type:'POST',--%>
	<%--		dataType:'json',--%>
	<%--		cache:false,--%>
	<%--		data:'',--%>
	<%--		url:"${basePath}ajaxwarningchartdata",--%>
	<%--		success:function(data){--%>
	<%--			var msg=data;--%>
	<%--			// 基于准备好的dom，初始化echarts实例--%>
	<%--			var linechart2 = echarts.init(document.getElementById('linechart2'));--%>

	<%--			linechart2.showLoading();--%>

	<%--			option = {--%>

	<%--				title: {--%>
	<%--					left: 'center',--%>
	<%--					text: '系统每日告警次数'--%>
	<%--				},--%>
	<%--				tooltip: {--%>
	<%--					trigger: 'axis'--%>
	<%--				},--%>
	<%--				xAxis: {--%>
	<%--					data: msg[0]--%>
	<%--				},--%>
	<%--				yAxis: {--%>
	<%--					splitLine: {show: false}--%>
	<%--				},--%>
	<%--				series: {--%>
	<%--					type: 'line',--%>
	<%--					showSymbol: true,--%>
	<%--					data: msg[1],--%>
	<%--					itemStyle : { normal: {label : {show: true}}}--%>

	<%--				}--%>
	<%--			};--%>
	<%--			// 使用刚指定的配置项和数据显示图表。--%>
	<%--			linechart2.setOption(option);--%>

	<%--			linechart2.hideLoading();--%>
	<%--		}--%>
	<%--	});--%>
	<%--}--%>
	<%--window.setTimeout(linechart2(),500);--%>

	//piechart1
	function piechart1(){
		$.ajax({
			type:'POST',
			dataType:'json',
			cache:false,
			data:'',
			url:"${basePath}ajaxfactypechartdata",
			success:function(msg){

				var piechart1 = echarts.init(document.getElementById('piechart1'));

				option = {
					title: {
						left: 'center',
						text: '设施类别及数量'
					},
					tooltip: {
						trigger: 'item',
						formatter: "{a} <br/>{b}: {c} ({d}%)"
					},
					legend: {
						orient: 'vertical',
						x: 'left',
						data:msg
					},
					series: [
						{
							name:'访问来源',
							type:'pie',
							radius: ['50%', '70%'],
							avoidLabelOverlap: false,
							label: {
								normal: {
									show: false,
									position: 'center'
								},
								emphasis: {
									show: true,
									textStyle: {
										fontSize: '30',
										fontWeight: 'bold'
									}
								}
							},
							labelLine: {
								normal: {
									show: false
								}
							},
							data:msg
						}
					]
				};
				piechart1.setOption(option);
			}
		});
	}
	window.setTimeout(piechart1(),500);

	//tablechart1
	function warningText(){
		$.ajax({
			type:'POST',
			dataType:'json',
			cache:false,
			data:'',
			url:"${basePath}ajaxwarningtextdata",
			success:function(data){
				var msg="";
				for(var index=0;index<data.length;index++){
					msg+=("<li>"+data[index]+"</li>");
				}

				$("#warningTextData").html(msg);
				msg="";
			}
		});
	}
	window.setTimeout(warningText(),500);

</script>

<script type="text/javascript">
	pieChart('pie','设备告警比','${basePath}ajaxbugrate?u='+Math.random());
	<%-- barChart('orgworker','维护公司级人数','<%=request.getContextPath()%>/ajaxcompanyandworkers.do?u='+Math.random()); --%>
	barChart('devicetype','设备类型及数量','${basePath}ajaxdevicetype?u='+Math.random());
	var contextPath = "${basePath}";
</script>

<!-- 滚动插件JS -->
<script type="text/javascript">
	//滚动插件
	(function($){
		$.fn.extend({
			Scroll:function(opt,callback){
				//参数初始化
				if(!opt) var opt={};
				var _this=this.eq(0).find("ul:first");
				var lineH=_this.find("li:first").height(), //获取行高
						line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度
						speed=opt.speed?parseInt(opt.speed,10):500, //卷动速度，数值越大，速度越慢（毫秒）
						timer=opt.timer?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒）
				if(line==0) line=1;
				var upHeight=0-line*lineH;
				//滚动函数
				scrollUp=function(){
					_this.animate({
						marginTop:upHeight
					},speed,function(){
						for(i=1;i<=line;i++){
							_this.find("li:first").appendTo(_this);
						}
						_this.css({marginTop:0});
					});
				}
				//鼠标事件绑定
				_this.hover(function(){
					clearInterval(timerID);
				},function(){
					timerID=setInterval("scrollUp()",timer);
				}).mouseout();
			}
		})
	})(jQuery);
	$(document).ready(function(){
		$("#scrollDiv").Scroll({line:1,speed:500,timer:1000});//可修改line值，speed值，timer值
	});
</script>
</body>
</html>
